import React from "react";

import {
  InputItem,
  ImagePicker,
  Checkbox,
  Button,
  WhiteSpace,
  Toast,
} from "antd-mobile";
import { http } from "@/utils/request";
import api from "@/utils/api";
import "./index.less";
import { withRouter } from "react-router-dom";
import { getQueryString } from "@/utils/utils.js";
const CheckboxItem = Checkbox.CheckboxItem;
class UploadRepay extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detail: {},
      files: [],
    };
  }

  componentWillMount() {
    let id = getQueryString("id");
    http
      .postJson(api.getOrderDetailsForWX, {
        id: id,
      })
      .then((res) => {
        this.setState({
          detail: res.data,
          order: res.data.order,
        });
      });
  }
  onAddImageClick = (e) => {
    // e.preventDefault();
    // this.setState({
    //   files: this.state.files.concat({
    //     url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
    //     id: '3',
    //   }),
    // });
  };
  onImageChange = (files, type, index) => {
    this.setState({
      files,
    });
  };
  submit = () => {
    let { files } = this.state;
    let { amount, orderId } = this.state.detail;

    if(!files.length){
      Toast.info('请先上传还款凭证')
      return
    }
    let formData = new FormData();
    // upFile就是后台接收的key
    formData.append("relaVoucher", files[0].file);
    formData.append("amount", amount);
    formData.append("orderId", orderId);
    // formData.amount = amount
    // formData.orderId = orderId
    http.post(api.repayment, formData , {
      hasFile: true
    }).then(() => {
      this.setState({
        isResult: true,
      });
    });
  };
  render() {
    let { detail, isResult, files } = this.state;
    return (
      <div className="advance">
        {isResult ? (
          <div>
            <div
              className="top bgc-fff text-center  ft-30"
              style={{ padding: "1rem" }}
            >
              <img
                style={{ width: "2rem", marginBottom: "0.4rem" }}
                src={require("../../images/result.png")}
              />
              <p className="ft-bold line-height-2">您的还款申请已提交成功！</p>
              <p>请及时关注审核状态，我们将在3个工作日内</p>
              <p>对您的信息进行审核</p>
            </div>
            <div className="bottom pd-15">
              <Button
                type="primary"
                onClick={() => {
                  this.props.history.push("mine");
                }}
              >
                返回我的
              </Button>
            </div>
          </div>
        ) : (
          <div>
            <div
              className="ft-bold bgc-fff border-bottom-d9"
              style={{ padding: "0 .4rem", lineHeight: 3 }}
            >
              <p>还款明细</p>
            </div>
            <div
              className="bgc-fff"
              style={{ padding: "0.4rem", lineHeight: 3 }}
            >
              <div className="w">
                <div className="flex flex-between">
                  <p>借款金额</p>
                  <p>{detail.amount}</p>
                </div>
                <div className="flex flex-between">
                  <p>预支时间</p>
                  <p>{detail.dateStart}</p>
                </div>
                <div className="flex flex-between">
                  <p>还款凭证</p>
                </div>
                <div style={{ width: "3rem" }}>
                  <ImagePicker
                    onChange={this.onImageChange}
                    length="1"
                    files={files}
                    onImageClick={(index, fs) => console.log(index, fs)}
                    selectable={files.length < 1}
                    onAddImageClick={this.onAddImageClick}
                  />
                </div>
              </div>
            </div>
            <div style={{ padding: "0.4rem" }}>
              <Button type="primary" onClick={this.submit}>
                提交申请
              </Button>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default withRouter(UploadRepay);
